import { Avatar, Flex, Typography } from "antd";
import { join, map } from "lodash";

const { Text } = Typography;

export default (props: any) => {
	const { data } = props;

	const name = join(
		map(data, item => item?.product_snapshot?.product_name ?? ""),
		","
	);

	const url = data?.[0]?.product_snapshot?.product_thumbnail;

	return (
		<Flex align="center" style={{ height: "100%" }}>
			<Avatar style={{ flexShrink: 0 }} shape="square" size={40} src={url} />
			<Text ellipsis={{ tooltip: true }} style={{ lineHeight: 1, paddingLeft: "10px" }}>
				{name}
			</Text>
		</Flex>
	);
};
